<template>
  <div class="list-containner">
    <div class="header">
      <div class="left">
        <span class="line">|</span>
        <span class="title" style="color:#323842;">我的设备</span>
        <span @click="goBack" class="right" style="float: right; color: #25B7C8; margin-right: 30px; cursor: pointer">
          <i class="el-icon-arrow-left"></i>
          返回
        </span>
      </div>

    </div>
    <div  class="list">
      <el-table
        :data="tableData"
        border
         stripe border fit highlight-current-row
         style="width: 98%;min-height:500px; background-color: #fff;"
        :header-cell-style="{background:'#D8DEE8'}"
        :body-cell-style="{background:'#D8DEE8'}"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-for="(column, index) in cols"
          :prop="column.prop"
          :label="column.label"
          :key="index"
          >
        </el-table-column>
        <el-table-column
          label="运行状态"
          width="150"
          prop="status"
        >
            <template slot-scope="scope">
              <span v-if="scope.row.status === '0'">开机</span>
              <span v-if="scope.row.status === '1'">关机</span>
            </template>
        </el-table-column>
        <el-table-column
          label="投产时间"
          prop="delivery_time"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="300">
          <template slot-scope="scope">
            <el-button @click.native.prevent="lookRow(scope.$index, scope.row,)" class="tableIcon" title="查看" size="small">
            <span>实时监测</span>
            </el-button>
            <el-button @click.native.prevent="viewAllData(scope.$index, scope.row,)" class="tableIcon"  title="查看" size="small">
              <span>统计数据</span>
            </el-button>
            <el-button @click.native.prevent="viewEquipData(scope.$index, scope.row,)" class="tableIcon"  title="查看" size="small">
              <span>设备对比</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container footerPage">
        <el-pagination
          @current-change="CurrentChange"
          @size-change="SizeChange"
          :page-sizes="[5, 10, 20, 50]"
          background layout="total, sizes, prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios'

  export default {
    name: 'projectList',
    components: {

    },
    data() {
      return {
        submitdata: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'console_my_equip_overview',
          data: {
            page: {
              page_size: '10',
              page_number: '1'
            }
          }
        },
        name: '李四',
        cols: [
          { prop: 'cid', label: '设备编号', width: '150px', sortable: true },
          { prop: 'name', label: '设备名称', width: '150px', sortable: true },
          { prop: 'type', label: '设备分类', width: '150px', sortable: true },
          { prop: 'brand', label: '设备品牌', width: '150px', sortable: true },
          { prop: 'model', label: '设备型号', width: '150px', sortable: true },
          { prop: 'local', label: '项目城市', width: '150px', sortable: true }
        ],
        tableData: [],
        indexMethod: '',
        total: 0 // 总共多少条
      }
    },
    mounted() {
      this.queryData()
    },
    methods: {
      queryData() {
        // 站点总览
        axios.post('/console', this.submitdata, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.tableData = res.data.data.items
          this.total = parseInt(res.data.data.page.total)
        })
          .catch(function(error) {
            console.log(error)
          })
      },
      // 当前页
      CurrentChange(val) {
        this.submitdata.data.page.page_number = (val) + ''
        this.queryData()
      },
      // 每页显示多少条
      SizeChange(pageSize) {
        this.submitdata.data.page.page_size = (pageSize) + ''
        this.queryData()
      },
      // 实时监测
      lookRow(index, rows) {
        console.log(rows)
        window.localStorage.num = rows.pid
        var looknumber = rows.pid
        this.$router.push({
          path: '/monitor/homepage/grab',
          query: {
            pid: looknumber
          }
        })
      },
      // 统计数据
      viewAllData(index, rows) {
        console.log(rows)
        window.localStorage.num = rows.pid
        var looknumber = rows.pid
        this.$router.push({
          path: '/monitor/homepage/grab',
          query: {
            pid: looknumber
          }
        })
      },
      // 设备对比
      viewEquipData(index, rows) {
        window.localStorage.num = rows.pid
        var looknumber = rows.pid
        this.$router.push({
          path: '/equipManagement/components/equipcontrast',
          query: {
            pid: looknumber
          }
        })
      },
      goBack() {
        this.$router.push({
          path: '/monitor/console'
        })
      }
    }

  }
</script>
<style scoped rel="stylesheet/scss" lang="scss" >
  .list-containner{
    width: 100%;
    min-height: 55vw;
    /*background-color: #25B6C7;*/
    color: #fff;
    font-size: 36px;
    background-color: #FFF;
    .header{
      width: 100%;
      height: 50px;
      font-size: 16px;
      font-family:MicrosoftYaHei;
      color:rgba(255,255,255,1);
      padding: 20px 0 0 20px;
      .line{
        color: #25B7C8;
        font-size: 16px;
        font-weight: bold;
      }

    }
    .list{
      width: 100%;
      min-height: 500px;
      margin: 0px 20px;
    }
    /deep/ .el-button--small{
      padding: 2px 5px;
      font-size: 12px;
      border-radius: 3px;
    }
  }
  .el-table__header-wrapper {
    height: 40px;
  }
  .el-table--border th {
    padding: 3px;
    text-align: center;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    text-align: center;
  }

 /*/deep/ .el-table td, .el-table th.is-leaf {*/
    /*border: 1px solid #181E28 ;*/
   /*background-color: #0D1016;*/
   /*color: #fff;*/
  /*}*/
 /*/deep/ .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {*/
    /*border-right: 1px solid #0d1016 ;*/
  /*}*/
 /*/deep/.el-table--border th, .el-table__fixed-right-patch {*/
    /*border-bottom: 1px solid #181E28;*/
    /*border-right: 1px solid #0D1016 ;*/
 /*}*/
 /deep/ .el-table thead {
    color: #69727E;
    font-weight: normal;
  }
  /deep/.el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
     height: 0px;
  }
  /*/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {*/
    /*background: #181E28;*/
  /*}*/
  /*/deep/ .el-table--enable-row-hover .el-table__body tr:hover>td{*/
    /*background-color: #212e3e !important;*/
  /*}*/
  .footerPage{
    float: right;
    right:20px;
    position: fixed;
  }
/deep/  .el-pagination span:not([class*=suffix]), .el-pagination button {
    display: inline-block;
    font-size: 13px;
    min-width: 35.5px;
    height: 28px;
    line-height: 53px;
    margin-top: -12px;
    /* vertical-align: bottom; */
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  /deep/ .el-button {
  border: 2px solid #2BBC8C;
    color: #2BBC8C;
  }

</style>
